<template>
  <div id="collectPraise">
    <div class="collectPraise__top">
      <!-- 上部搜索条件 -->
      <topSearch
        :form-inline="formInline"
        @toSearch="toSearch"
        :activeList="activeList"
      ></topSearch>
      <!-- 操作按钮部分 -->
      <div class="box-btn">
        <div class="box-btn__left">
          <el-button
            type="success"
            class="box-btn__left__all"
            size="medium"
            icon="el-icon-plus"
            @click="addActives"
            >新增</el-button
          >
        </div>
        <div class="box-btn__right">
          <freshCom class="refresh-btn" @searchList="searchList"></freshCom>
        </div>
      </div>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="vest-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      ref="table"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column prop="activityName" label="活动名称"></el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <!-- <el-table-column label="展翅入量渠道" align="center" prop="channelNum" /> -->
      <!-- 活动状态: NOT_STARTED 未开始 | ONGOING 进行中 | OVER 已结束 -->
      <el-table-column label="活动状态" align="center" prop="longChain">
        <template slot-scope="scope">
          <span v-if="scope.row.activityStatus === 'NOT_STARTED'">未开始</span>
          <span v-if="scope.row.activityStatus === 'ONGOING'">进行中</span>
          <span v-if="scope.row.activityStatus === 'OVER'">已结束</span>
        </template>
      </el-table-column>

      <el-table-column label="活动时间" align="center">
        <template slot-scope="scope">
          <span>
            {{ scope.row.activityStartTime }} <br />
            至 <br />{{ scope.row.activityEndTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="活动海报" prop="shortChain">
        <template slot-scope="scope">
          <listImgShow :imgInfo="scope.row.imgJson"></listImgShow>
        </template>
      </el-table-column>
      <el-table-column
        label="领取奖品时间"
        align="center"
        prop="acceptThePrizeStartTime,acceptThePrizeEndTime"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.acceptThePrizeStartTime }} <br />
            至 <br />{{ scope.row.acceptThePrizeEndTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作人"
        align="center"
        prop="operatorUser.trueName"
      >
        <template slot-scope="scope">
          {{
            scope.row.operatorUser.trueName
              ? scope.row.operatorUser.trueName
              : '--'
          }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.activityStatus === 'NOT_STARTED'"
            @click="handleStartActive(scope.row)"
            type="text"
          >
            开始
          </el-button>
          <el-button
            v-if="scope.row.activityStatus === 'ONGOING'"
            @click="endActive(scope.row)"
            type="text"
          >
            结束
          </el-button>
          <el-button
            v-if="scope.row.activityStatus !== 'OVER'"
            @click="editActives(scope.row)"
            type="text"
          >
            编辑
          </el-button>
          <el-button @click="copyShowAround(scope.row)" type="text"
            >一键复制</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import topSearch from './topSearch' // 上部搜索条件
//
import {
  getAdviserList,
  startActive,
  endActive
} from '@/api/activePull/adviserList/index'
export default {
  name: 'adviserList',
  msg: '顾问转介绍活动列表页',
  components: {
    topSearch
  },
  data() {
    return {
      // 搜索条件
      formInline: {
        activityName: '', //活动名称
        activityStatus: '', // 活动状态
        activityStartTimeStart: '',
        activityStartTimeEnd: ''
      },
      activeList: [
        { dictLabel: '进行中', dictValue: 'ONGOING' },
        { dictLabel: '未开始', dictValue: 'NOT_STARTED' },
        { dictLabel: '已结束', dictValue: 'OVER' }
      ],
      // 表格数据
      tableData: [],
      //列表加载控制
      loading: true,
      //列表分页条数
      total: 0,
      //列表分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      }
    }
  },
  created() {
    this.loading = false
  },
  mounted() {
    this.searchList()
  },
  activated() {
    this.searchList()
  },
  methods: {
    // 活动名称列表
    searchList() {
      let params = { ...this.searchParams, ...this.formInline }
      getAdviserList(params, (res) => {
        if (res.rows) {
          this.tableData = res.rows
          this.tableData.forEach((item, index) => {
            this.$set(item, 'imgJson', [])
            item.imgJson.push({
              url: item.activityPoster
            })
          })
          this.total = res.total
        }
        this.loading = false
      })
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    // 添加活动
    addActives() {
      this.$router.push({
        name: 'wh:addActives'
      })
    },
    // 编辑
    editActives(val) {
      this.$router.push({
        name: 'wh:addActives',
        query: { type: 'edit', id: val.activityId }
      })
    },
    // 一键复制
    copyShowAround(val) {
      this.$router.push({
        name: 'wh:addActives',
        query: { type: 'copy', id: val.activityId }
      })
    },
    // 开始活动
    handleStartActive(item) {
      console.log(item)
      this.$confirm(`确认要开始活动吗？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        startActive(item.activityId, (res) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          // 刷新列表
          this.searchList()
        })
      })
    },
    // 结束活动
    endActive(item) {
      this.$confirm(`是否结束该活动`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        endActive(item.activityId, (res) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          // 刷新列表
          this.searchList()
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
#collectPraise {
  @import url('~@common/style/imgBox.less');
  .showImg {
    cursor: pointer;
  }
}
.collectPraise__top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  .box-btn {
    padding-left: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    align-items: center;
    width: 100%;
    .box-btn__left {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      .box-btn__left__all {
        padding: 5px 10px;
      }
      .box-btn__left__export {
        padding: 5px 10px;
        margin-right: 10px;
      }

      .descriptions-box {
        display: flex;
        flex-direction: row;
        font-size: 13px;
        line-height: 23px;
        flex-wrap: wrap;
        width: 100%;
        .descriptions-list {
          display: flex;
          flex-wrap: wrap;
          margin: 0 20px;
          .descriptions-list__span {
            display: block;
            font-size: 15px;
            font-weight: 800;
          }
        }
      }
    }
    .box-btn__right {
      flex-grow: 1;
      .refresh-btn {
        margin-right: 30px !important;
      }
    }
  }
}
.delBtn {
  color: #ff0000;
  cursor: pointer;
  &:hover {
    color: #f92d2d;
  }
}
</style>
